<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-form ref="form" :inline="true" :model="form">
                    <el-form-item>
                        <el-button type="primary" @click="handleExport()">导出</el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="default" @click="handleClose(60)">关闭</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column width="auto" label="ID" align="center">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>

                <el-table-column width="auto" label="歌曲名" align="center">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>

                <el-table-column width="auto" label="歌手名" align="center">
                    <template slot-scope="scope">{{ scope.row.tblActors ? scope.row.tblActors.name : '' }}</template>
                </el-table-column>

                <el-table-column width="auto" label="专辑名" align="center">
                    <template slot-scope="scope">{{ scope.row.tblAlbum ? scope.row.tblAlbum.name : '' }}</template>
                </el-table-column>

                <el-table-column width="auto" label="CP名" align="center">
                    <template slot-scope="scope">{{ scope.row.tblCppartner ? scope.row.tblCppartner.name : '' }}</template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination
                    background
                    layout="total,sizes, prev, pager, next, jumper"
                    :page-sizes="[5, 10, 20, 30]"
                    @size-change="handleSizeChange"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
  import { debounce, throttle } from '@/utils/utils.js';
  export default {
      name: 'Appointment',
      data() {
          return {
              query: {
                  pageIndex: 1,
                  pageSize: 10,
                  day: 10
              },
              tableData: [],
              pageTotal: 0,
              form: {}
          };
      },
      activated() {
          this.getDataById(this.$route.query.id);
      },
      methods: {
          // 关闭
          handleClose() {},
          //导出
          handleExport() {},
          async getDataById(mid) {
              try {
                  let url = '/cpp/songList';
                  let { data: res } = await this.$http[1].get(url, {
                      params: this.$removeField({
                          id: mid,
                          page: this.query.pageIndex,
                          size: this.query.pageSize
                      })
                  });
                  console.log('歌曲详情', res);
                  if (res.data.content && res.data.content.length > 0) {
                      res.data.content.map((item) => {
                          if (item.tblActors && item.tblActors.length > 0) {
                              item.tblActors.name = '';
                              item.tblActors.map((item_) => {
                                  item.tblActors.name += item_.name + '/';
                              });
                              item.tblActors.name = item.tblActors.name.slice(0, -1);
                          } else {
                              item.tblActors = [];
                              item.tblActors.name = '';
                          }
                      });
                      this.tableData = res.data.content;
                      this.pageTotal = res.data.totalElements;
                  } else {
                      this.tableData = [];
                      this.pageTotal = 0;
                  }
              } catch (err) {
                  console.dir(err);
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },
          // 触发搜索按钮
          // handleSearch(day) {
          //     this.$set(this.query, 'pageIndex', 1);
          //     this.getDataById();
          // },

          handleSearch: debounce(function (day) {
              this.$set(this.query, 'pageIndex', 1);
              this.getDataById();
          }, 300),

          // 多选操作
          handleSelectionChange(val) {
              // this.multipleSelection = val;
          },

          // 分页导航
          handlePageChange(val) {
              this.$set(this.query, 'pageIndex', val);
              this.getDataById();
          },
          handleSizeChange(val) {
              this.$set(this.query, 'pageSize', val);
              this.getDataById();
          }
      }
  };
</script>

<style scoped>
  .handle-box {
      margin-bottom: 20px;
  }

  .handle-select {
      width: 120px;
  }

  .handle-input {
      /* width: 300px; */
      width: 69px;
      height: 28px;
      display: inline-block;
  }
  .table {
      width: 100%;
      font-size: 14px;
  }
  /* .red {
                color: #ff0000;
            } */
  .mr10 {
      margin-right: 10px;
  }
  .table-td-thumb {
      display: block;
      margin: auto;
      width: 40px;
      height: 40px;
  }
</style>
